<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<meta http-equiv='page-enter' content='blendTrans(Duration=0.5)'>
<meta http-equiv='imagetoolbar' content='no'>
<meta http-equiv='expires' content='Sat, 18 May 2012 23:59:59 GMT'>
<meta http-equiv='pragma' content='no-cache'>
<meta name='keywords' content='Book Square'>
<meta name='description' content='Book Square to trading book in James Cook University Singapore'>
<meta name='author' content='James Cook University Singapore by Sprakling Team'>
<meta name='publisher' content='James Cook University Singapore by Sprakling Team'>
<meta name='copyright' content='&copy; 2012. James Cook University Singapore by Sprakling Team'>
<meta name='page-topic' content='Book Square index page'>
<meta name='distribution' content='global'>
<meta name='content-language' content='en'>
<meta name='robots' content='index, follow'>
<meta name='revisit-after' content='30 days'>
<link href='/asset/img/favicon.ico' rel='shortcut icon' type='image/x-icon'>
<link href='/asset/img/favicon.ico' rel='icon' type='image/x-icon'>
<style type="text/css" title="currentStyle" media="all">/*<![CDATA[*/@import url("asset/css/class_global.css");/*]]>*/</style>
<?php echo $css; ?>
<title><?php echo $title; ?></title>
<script type="text/javascript" src="asset/js/jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){
	$("#msgbox").click(function() {
		$("#msgbox").css('display','none').fadeOut(1000);
	});
	
	$("#username").mousedown(function(){
		if($(this).val() == "username"){
			$(this).val("");
		}	
	});
	
	$("#username").focusout(function(){
		if($(this).val() == ""){
			$(this).val("username");
		}	
	});
	
	$("#password").mousedown(function(){
		if($(this).val() == "password"){
			$(this).val("");
		}	
	});
	
	$("#password").focusout(function(){
		if($(this).val() == ""){
			$(this).val("password");
		}	
	});
	
	//$("#msgbox").removeClass().addClass('messagebox').html("username and password are mismatch").fadeIn(1000);
	$("#login_btn").click(function(){
		username=$("#username").val();
		password=$("#password").val();
		$.ajax({
            type: "POST",
            url: "login.php",
			cache: false,
            data: "name="+username+"&pwd="+password,
            success: function(response){
				//alert(response.length);
				var status = response.length;
              if(status==8)
              {
              		alert("Login");
                	window.location = "index.php";
					$("#msgbox").removeClass().addClass('messagebox').html(response).fadeIn(1000);
				
              }
              else
              {
                    $("#msgbox").removeClass().addClass('messagebox').html("username and password are mismatch").fadeIn(1000);
              }
            },
            beforeSend:function()
			{
                 //$("#add_err").html("Loading...")
            }
        });
        return false;
	});
	
});
</script>
<link rel="stylesheet" type="text/css" href="asset/css/class_searchbox.css" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="asset/js/script.js"></script>

<style type="text/css">
.messagebox{
	cursor:pointer;
	position:absolute;
	/*width:auto;
	margin-left:30px;
	border:1px solid #c93;
	background:#ffc;
	padding:3px;
	color:#000;
	z-index:100;
	position:relative;
	padding:15px;
	margin:1em 0 3em;*/
	top:-50px;
	min-width:150px;
	margin:1em 0;
	padding:10px 15px;
	color:#fff;
	background:#075698; /* default background for browsers without gradient support */
	/* css3 */
	background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
	background:-moz-linear-gradient(#f9d835, #f3961c);
	background:-o-linear-gradient(#f9d835, #f3961c);
	background:linear-gradient(#f9d835, #f3961c);
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
}
.messagebox:after {
	content:"";
	position:absolute;
	bottom:-10px; /* value = - border-top-width - border-bottom-width */
	left:50px; /* controls horizontal position */
	border-width:10px 10px 0; /* vary these values to change the angle of the vertex */
	border-style:solid;
	border-color:#f3961c transparent;
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}
.messageboxok{
	position:absolute;
	width:auto;
	margin-left:30px;
	border:1px solid #349534;
	background:#C9FFCA;
	padding:3px;
	font-weight:bold;
	color:#008000;
	
}
.messageboxerror{
	position:absolute;
	width:auto;
	margin-left:30px;
	border:1px solid #CC0000;
	background:#F7CBCA;
	padding:3px;
	font-weight:bold;
	color:#CC0000;
}
</style>
</head>

<body>
<div class="wrapper">
	<div id="top">
    	<div class="left">
        	<div id="logo">
                <a href="http://jcu.edu.sg/"><img src="asset/img/jcu-logo.png" /></a>
            </div>
        </div>
        <div class="left">
        	<div id="big_search">
            	<div id="big_search_box">
                <form id="searchform">
                	<input type="text" onkeyup="lookup(this.value);" id="big_search_text" name="search_txt" value="search book" /> <input type="submit" id="search_btn" value="" />
                </form>
                	<div id="suggestions"></div>
                </div>
                <div id="advanced_search"><a href="advanced_search.php">advanced search</a></div>
                <div class="clear"></div>
            </div>
        </div>
        <div class="clear"></div>
    </div>
</div>
<div id="navigation">
	<div class="wrapper">
    	<div id="book_square"><a href="index.php"><img src="asset/img/booksquare-logo.png" /></a></div>
        <div id="nav_box">
            <ul id="nav">
            <?php
			switch ($page_name)
			{
				case "book_on_sell":
					$status_book_on_sell = "active";
					$status_requested_book = "";
					$status_faq = "";
				break;
				case "requested_book":
					$status_book_on_sell = "";
					$status_requested_book = "active";
					$status_faq = "";
				break;
				case "faq":
					$status_book_on_sell = "";
					$status_requested_book = "";
					$status_faq = "active";
				break;
				default:
					$status_book_on_sell = "";
					$status_requested_book = "";
					$status_faq = "";
				break;
			}
            echo'<li><a href="book_to_sell.php" id="' .$status_book_on_sell . '">Book On Sale</a></li>
                <li><a href="requested_book.php" id="' .$status_requested_book . '">Requested Book</a></li>
                <li><a href="faq.php" id="' .$status_faq . '">FAQ</a></li>
				';
			?>
            </ul>
        </div>
        <div id="login_area">
            <form action="login.php" method="post" id="login">
                <input name="username" type="text" id="username" value="username" />
                <input name="password" type="password" id="password" value="password" />
                <input type="submit" value="" id="login_btn" />
                <input type="hidden" name="page" value="<?php echo $page_name; ?>" />
            </form>
            <p class="messagebox" id="msgbox" style="display:none"></p>
        </div>
        <div class="clear"></div>
    </div>
</div>